<template>
  <div class="device-detail-wrap">
    <!-- 标题 -->
    <div class="device-detail-title page-title-wrap">
      <p class="page-title-name">
        <i class="iconfont icon_biaotijiantou" @click="$Ctl.backProvePage()"></i>
        <span class="page-title-text">设备清单</span>
      </p>
    </div>
    <!-- 主展示区域 -->
    <div class="device-maincontent">
      <!-- 切换视图 -->
      <div class="change-page-btn iconfont" @click="changePage" v-show="!showLayeredMap"></div>
      <!-- 设备列表 -->
      <device-list class="device-list" :parames="parames" @selectDevice="selectDeviceBaseInfoChaneg"></device-list>
      <!-- 总览 -->
      <center class="page-wrap-one" v-show="pageType==1" :deviceInfo="selectDeviceBaseInfo"></center>
      <!-- 基本信息+24小时变化 -->
      <div class="page-wrap-two" v-show="pageType==2">
        <base-info class="base-info-model" :deviceInfo="selectDeviceBaseInfo" @showOrCloseLayerMap="showOrCloseLayerMap"></base-info>
        <status-change class="status-change-model" :deviceInfo="selectDeviceBaseInfo"></status-change>
      </div>
    </div>

    <!-- 分层图 -->
    <layered-map class="layered-map" :layerInfo="layerInfo" @showOrCloseLayerMap="showOrCloseLayerMap" v-if="showLayeredMap"></layered-map>
  </div>
</template>
<script>
import '@/styles/common/detailPage.scss'
import DeviceList from './PageModel/DeviceList'
import BaseInfo from './PageModel/BaseInfo'
import Center from './PageModel/Center'
import StatusChange from './PageModel/StatusChange'
import LayeredMap from './PageModel/LayeredMap'

export default {
  props: {
    parames: {
      default() {
        return {}
      },
    },
  },
  components: {
    DeviceList,
    BaseInfo,
    Center,
    StatusChange,
    LayeredMap,
  },
  data() {
    return {
      pageType: '1', // 展示第一页还是第二页
      selectDeviceBaseInfo: {}, // 选择的设备基本信息
      layerInfo: {}, // 分层图信息
      showLayeredMap: false,
    }
  },
  created() {},
  methods: {
    // 切换视图
    changePage() {
      this.pageType = this.pageType == '1' ? '2' : '1'
    },
    // 选择了设备
    selectDeviceBaseInfoChaneg(baseInfo) {
      if (baseInfo) {
        this.selectDeviceBaseInfo = baseInfo
        this.showLayeredMap = false
      }
    },
    // 显示隐藏分层图
    showOrCloseLayerMap(obj) {
      if (obj) {
        this.layerInfo = obj
        this.showLayeredMap = true
      } else {
        this.showLayeredMap = this.showLayeredMap ? false : true
      }
    },
  },
}
</script>
<style lang="scss">
.device-detail-wrap {
  padding: 0 30px 80px 30px;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 20px 20px rgba(16, 55, 88, 0.3) inset;
  background-color: #061723;
  color: #fff;
  .device-maincontent {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: calc(100% - 80px);
    .change-page-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 10;
      background: url(../../../../assets/images/detailPage/change-page-btn.png)
        center center no-repeat;
      background-size: cover;
      &:hover {
        background: url(../../../../assets/images/detailPage/change-page-btn-hover.png)
          center center no-repeat;
        background-size: cover;
      }
    }
    .device-list {
      width: 25%;
      height: 100%;
      border: 1px solid rgba(94, 184, 247, 0.5);
    }
    .page-wrap-one,
    .page-wrap-two {
      width: calc(75% - 30px);
      height: 100%;
      border: 1px solid rgba(94, 184, 247, 0.5);
    }
    .page-wrap-two {
      display: flex;
      box-shadow: inset 0px 2px 30px 0px rgba(82, 196, 255, 0.5);
      padding: 20px 50px;
      justify-content: space-around;
      .base-info-model,
      .status-change-model {
        width: 50%;
        height: 100%;
      }
    }
  }
  .layered-map {
    z-index: 10;
    position: fixed;
    top: 110px;
    left: calc(25% + 65px);
    width: calc(75% - 116px);
    height: calc(100% - 200px);
  }
}

/* 不同分辨率适配 */
@media screen {
  //1920
}
@media screen and (min-width: 1930px) {
  //1920< <2560
}
// 大于2560
@media screen and (min-width: 2560px) {
  .device-detail-wrap {
    .device-maincontent {
      .change-page-btn {
        display: none;
      }
      .device-list {
        width: 630px;
        //     .header-type-choose {
        //         display: flex;
        //         align-items: center;
        //         height: 60px;
        //         flex-flow: row-reverse;
        //         .status-list {
        //             width: 50%;
        //         }
        //         .search-text {
        //             width: 48%;
        //             margin-top: 0;
        //             margin-right: 2%;
        //         }
        //     }
        //     .result-list-wrap {
        //         height: calc(100% - 90px);
        //     }
      }
      .page-wrap-one {
        position: absolute;
        display: block !important;
        left: 660px;
        width: calc(100% - 660px);
        .device-attributes-wrap {
          width: calc(100% - 1300px);
          margin: 0 auto;
        }
      }
      .page-wrap-two {
        display: flex !important;
        justify-content: space-between;
        padding: 20px;
        width: calc(100% - 660px);
        .base-info-model,
        .status-change-model {
          width: 610px;
          z-index: 10;
        }
        .base-info-model {
          .device-info-text {
            box-shadow: inset 0px 2px 30px 0px rgba(255, 255, 255, 0.3);
          }
          .device-info-items {
            ul {
              li {
                box-shadow: inset 0px 2px 20px 0px rgba(255, 255, 255, 0.2);
              }
            }
          }
        }
        .status-change-model {
          .status-content-top {
            border-radius: 8px;
            box-shadow: inset 0px 2px 30px 0px rgba(255, 255, 255, 0.3);
          }
        }
      }
    }
  }
}
</style>
